<template>
  <div class="app-container home">
    <div class="page-header" v-if="details">
      <div class="header-node">
        <span class="name">编码：</span>
        <span class="teext">{{ details.code }}</span>
      </div>
      <div class="header-node ml50">
        <span class="name">推介类型：</span>
        <span class="teext">{{ details.businessTypeName }}</span>
      </div>
      <div class="header-node ml50">
        <span class="name">页面名称：</span>
        <span class="teext">{{ details.pageName }}</span>
      </div>
      <div class="header-node ml50">
        <span class="name">所属节点：</span>
        <span class="teext">{{ details.nodeName }}</span>
      </div>
      <div class="ml-auto">
        <button @click="handleExit">返回</button>
      </div>
    </div>
    <approval-timeline
      :activities="activities"
      style="margin-top: 30px; margin-left: 150px"
    />
    <div class="opinion">
      <span class="text">是否同意：</span>
      <el-radio v-model="radio" label="1">同意</el-radio>
      <el-radio v-model="radio" label="2">不同意</el-radio>
    </div>
    <div class="input-opinion">
      <span class="text">审批意见：</span>
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="btn">
      <el-button class="determine" @click="handleSave">确定</el-button>
      <el-button class="close" @click="handleExit">取消</el-button>
    </div>
  </div>
</template>

<script>
import ApprovalTimeline from "../../../components/ApprovalTimeline/ApprovalTimeline.vue";
import { workflowPass, workflowRefuse } from "@/api/approvalManage/waitingApproval.js";
import { commentByTaskid } from "@/api/approvalManage/waitingApproval.js"
export default {
  components: { ApprovalTimeline },
  name: "Approval",
  data() {
    return {
      reverse: true,
      radio: "",
      textarea: "",
      details: null,
      activities: [],
    };
  },
  mounted() {
    this.details = JSON.parse(this.$route.query.data);
    commentByTaskid({procInstId: this.details.procInstId}).then(res => {
      this.activities = res.data;
    })
  },
  methods: {
    handleExit() {
      this.$router.push("/approvalManage/waitingApproval");
    },
    handleSave() {
      const params = {
        businessType: this.details.businessType,
        taskId: this.details.taskId,
        businessId: this.details.pageId,
        comment: this.textarea
      }
      if(this.radio == 1) {
        workflowPass(params).then(res => {
          this.$router.push("/approvalManage/waitingApproval");
          this.$message.success('操作成功！')
        })
      } else {
        workflowRefuse(params).then(res => {
          this.$router.push("/approvalManage/waitingApproval");
          this.$message.success('操作成功！')
        })
      }
      
    }
  },
};
</script>

<style scoped lang="scss">
.page-header {
  border-bottom: 1px solid #efefef;
  display: flex;
  padding-bottom: 20px;
  .header-node {
    .name {
      color: #888;
    }
  }
  .ml50 {
    margin-left: 50px;
  }
  .ml-auto {
    margin-left: auto;
    button {
      width: 80px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      background: #fff;
      color: #971111;
      border: 1px solid #971111;
      outline: none;
      cursor: pointer;
      font-size: 16px;
      border-radius: 3px;
      font-weight: 400;
    }
  }
}
.el-timeline {
  padding: 0;
  margin-top: 30px;
}
.opinion {
  margin-left: 540px;
  margin-top: 70px;
  font-size: 16px;
  color: #333;
  ::v-deep .el-radio__label {
    font-size: 16px;
    color: #333;
  }
  ::v-deep .el-radio__inner {
    background-color: #fff;
    border-color: #971111;

    &::after {
      width: 8px;
      height: 8px;
      background-color: #971111;
    }
  }
  .text {
    margin-right: 15px;
  }
}
.input-opinion {
  margin-left: 540px;
  margin-top: 28px;
  span {
    vertical-align: top;
  }
  ::v-deep .el-textarea {
    width: 468px;
    display: inline-block;
    .el-textarea__inner {
      &:focus {
        border-color: #971111;
      }
    }
  }
}
.btn{
  text-align: center;
  margin-top: 35px;
  button{
    width: 56px;
    height: 32px;
    padding: 0;
    border-radius: 3px;
    border: none;
    font-size: 16px;
  }
  .determine{
    background: #971111;
    color: #fff;
  }
  .close{
    background: #e7e7e7;
    color: #000000e6;
  }
}
</style>